<div class="dataTable equipment-list">
  <div class="title">{{'EquipmentManagement.EquipmentManagement.Equipment_Management' | translate}}</div>
  <div class="table-content">
    <div class="table-buttons">
      <div class="table-buttons-left">
        <!-- <div class="operate" (click)="addOrEdit('add')" *ngIf='accessButton.Create'><i
          class="iconfont icon-add"></i>{{'EquipmentManagement.EquipmentManagement.Create' | translate}}</div>
      <div class="operate" (click)="addOrEdit('edit')"  *ngIf='accessButton.Edit'><i
          class="iconfont icon-pen01"></i>{{'EquipmentManagement.EquipmentManagement.Edit' | translate}}</div>
      <div class="operate" (click)="delete()" *ngIf='accessButton.Delete'><i
          class="iconfont icon-fork"></i>{{'EquipmentManagement.EquipmentManagement.Delete' | translate}}</div>
      <div class="left-button-last" (click)="refresh()"><i class="iconfont icon-refresh1"></i></div> -->

        <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('add')" *ngIf="accessButton?.Create">
          <!-- <i nz-icon nzType="plus" nzTheme="outline"></i> -->
          <svg t="1649734574121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20"><path d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z" p-id="4499" fill="#ffffff"></path><path d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z" p-id="4500" fill="#ffffff"></path></svg>
          {{'EquipmentManagement.EquipmentManagement.Create' | translate}}
        </button>
        <button class="op-btn" nz-button nzType="primary" (click)="addOrEdit('edit')" *ngIf="accessButton?.Edit">
          <!-- <i nz-icon nzType="edit" nzTheme="outline"></i> -->
          <svg t="1649741351323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5424" width="20" height="20"><path d="M521.152 393.408l319.936-320 45.248 45.312-320 320z" fill="#ffffff" p-id="5425"></path><path d="M896 960H64V64h448v64H128v768h704V448h64v512z" fill="#ffffff" p-id="5426"></path></svg>
          {{'EquipmentManagement.EquipmentManagement.Edit' | translate}}
        </button>
        <button class="op-btn" nz-button nzType="danger" (click)="delete()" *ngIf="accessButton?.Delete">
          <!-- <i nz-icon nzType="delete" nzTheme="outline"></i> -->
          <svg t="1649741442766" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5702" width="20" height="20"><path d="M256 256h554.666667v640H256V256z m42.666667 42.666667v554.666666h469.333333V298.666667H298.666667z m128 128h42.666666v298.666666h-42.666666v-298.666666z m170.666666 0h42.666667v298.666666h-42.666667v-298.666666zM213.333333 256h640v42.666667H213.333333V256z m213.333334-85.333333h213.333333v42.666666h-213.333333V170.666667z" fill="#ffffff" p-id="5703"></path></svg>
          {{'EquipmentManagement.EquipmentManagement.Delete' | translate}}
        </button>
        <button class="op-btn" nz-button nzType="primary" (click)="refresh()" nzShape="circle">
          <i nz-icon nzType="reload" nzTheme="outline"></i>
        </button>

        <div class="showNum" *ngIf="showEquipmentNum.show">{{showEquipmentNum.type}} :
          {{'EquipmentManagement.EquipmentManagement.total' | translate}} {{showEquipmentNum.total}} ,
          {{'EquipmentManagement.EquipmentManagement.faulity' | translate}} {{showEquipmentNum.faulity}}</div>
      </div>
      <div class="table-buttons-right">
        <div class="equipmet_toolbar" style="display: flex;
        align-items: center;">
          <i class="iconfont icon-jinggao1" (click)="showVMSErr()" *ngIf="selectType===0" nz-tooltip nzTitle="alarm"
            nzPlacement="bottom" style="margin-top: 3px; font-size: 20px; display: none;"></i>
          <i class="iconfont icon-shezhi" (click)="showVMS()" *ngIf="selectType===0 && accessButton.Setting" nz-tooltip
            nzTitle="settting" nzPlacement="bottom" style="margin-top: 3px; font-size: 20px;"></i>
          <itmp-toolbar [toolbarList]="toolbarList" [selectData]="selectEquipmentData" eventType="equipment-position"
            [accessButton]="accessButton" [searchData]="searchData" exportName="equipmentList"></itmp-toolbar>
        </div>
      </div>
    </div>
    
    <nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzPageSize]="pagination.pageSize"
      [nzData]="listOfData" style="padding:0.1rem">
      <thead>
        <tr class="dataTitle">
          <th *ngFor="let item of renderHeader" class="listTitle">
            <div>{{'EquipmentManagement.EquipmentManagement.' + item.name | translate}}</div>
            <!-- 选择框 -->
            <div class="switch no-print" *ngIf="item.name==='Type' || item.name==='Direction' || item.name==='Status'"
              style="min-width: 1.3rem">
              <nz-select *ngIf="item.name==='Type'" style="width: 100%;" [(ngModel)]="searchData[item.value]"
                [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear
                (ngModelChange)="onSearch(item.value)">
                <nz-option *ngFor="let one of selectionList[item.name]" [nzLabel]="one.displayName"
                  [nzValue]="one.value"></nz-option>
              </nz-select>
              <nz-select *ngIf="item.name==='Direction' || item.name==='Status'" style="width: 100%;"
                [(ngModel)]="searchData[item.value]" [nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear
                (ngModelChange)="onSearch(item.value)">
                <nz-option *ngFor="let one of selectionList[item.name]"
                  [nzLabel]="'EquipmentManagement.EquipmentManagement.'+one|translate" [nzValue]="one"></nz-option>
              </nz-select>
            </div>
            <!-- 输入框 -->
            <div class="switch no-print" *ngIf="item.name==='zone_ID' || item.name==='ID' || item.name==='RoadName'">
              <input nz-input [placeholder]="'' | translate" style="width:100%" [(ngModel)]="searchData[item.value]"
                (keyup)="onSearch(item.value)" #searchInput />
            </div>
            <!-- 日期选择 -->
            <div class="switch no-print" *ngIf="item.name==='Updated_Date'">
              <!-- <nz-date-picker [(ngModel)]="searchData[item.value]" (ngModelChange)="onSearch(item.value)"></nz-date-picker> -->
              <nz-range-picker
                [nzPlaceHolder]="['EquipmentManagement.EquipmentManagement.Start Time'|translate, 'EquipmentManagement.EquipmentManagement.End Time'|translate]"
                [(ngModel)]="updatedDate" [nzDisabledDate]="disabledDate" (ngModelChange)="onDateOk($event)">
              </nz-range-picker>
            </div>
            <!-- 占用位置 -->
            <!-- <div class="switch no-print" *ngIf="item.name==='Photograph'">
            <input nz-input style="opacity: 0" />
          </div> -->
          </th>
        </tr>
      </thead>
      <tbody class="dataList">
        <tr *ngFor="let data of basicTable.data;index as i" (click)="clickTR(i)" [class.active]="data.active">
          <td>{{data.eqtId}}</td>
          <td>{{data.zoneId}}</td>
          <td>{{data.roadName}}</td>
          <td>{{data.direction}}</td>
          <td>
            <!-- {{data.eqt_type}} -->
            <i *ngIf="data.eqtType == 3" class="iconfont icon-CCTV"
              style="font-size:30px;cursor: pointer;font-weight: 600" (click)="cctvClick(data)"></i>
            <i *ngIf="data.eqtType == 0" class="iconfont icon-VectorSmartObject"
              style="font-size:30px;cursor: pointer;font-weight: 600"></i>
            <i *ngIf="data.eqtType == '1'" class="iconfont icon-ziyuan"
              style="font-size:30px;cursor: pointer;font-weight: 600"></i>
            <i *ngIf="data.eqtType == 6" class="iconfont icon-honglvdeng"
              style="font-size:30px;cursor: pointer;font-weight: 600"></i>
            <i *ngIf="data.eqtType == 4" class="iconfont icon-honglvdeng"
              style="font-size:30px;cursor: pointer;font-weight: 600"></i>
          </td>
          <td>{{data.blackList}}</td>
          <!-- <td class="OK" *ngIf="data.status_code==='OK'">{{data.status_code}}</td> -->
          <td class="Fault" *ngIf="data.status==='FAULTY'">
            {{'EquipmentManagement.EquipmentManagement.'+data.status|translate}}</td>
          <td *ngIf="data.status!=='FAULTY'">{{'EquipmentManagement.EquipmentManagement.'+data.status|translate}}</td>
          <!-- <td class="Warning" *ngIf="data.status_code==='Warning'">{{data.status_code}}</td>
        <td class="Off-line" *ngIf="data.status_code==='Off-line'">{{data.status_code}}</td> -->
          <!-- <td><i class="iconfont icon-chakan" style="font-size:24px;cursor: pointer;" (click)="showPhoto($event,i)"></i></td> -->
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <!-- <td>Showing 1 to 10 of 1083 entries</td> -->
          <td [attr.colspan]="renderHeader.length+1" style="padding: 10px;" *ngIf="basicTable.data.length!==0">
            <itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
              [pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
              (pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)"></itmp-pagination>
          </td>
        </tr>
      </tfoot>
    </nz-table>
  </div>

</div>
<nz-modal [(nzVisible)]="isForceVisible"
  nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}"
  (nzOnCancel)="FourchHandleCancel()" (nzOnOk)="ForceHandleOk()">
  <div>
    {{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
  </div>
</nz-modal>

<itmp-add-equipment *ngIf="isVisible" [(visible)]="isVisible" [title]="addEquipmentTitle"
  [manageEquipment]="selectEquipment" [selectionList]="selectionList" (getData)="getData()"
  [isTaskFromGis]="isTaskFromGis" (positionNewDevice)="positionNewDevice($event)"></itmp-add-equipment>
<itmp-vms-modal *ngIf="isVMSModalVisible" [(visible)]="isVMSModalVisible" [data]="selectEquipment"></itmp-vms-modal>
<itmp-vms-err *ngIf="isVMSErrVisible" [(visible)]="isVMSErrVisible" [data]="selectVmsErr"></itmp-vms-err>
<!-- <itmp-photo-equipment *ngIf="isPhotoVisible" [(visible)]="isPhotoVisible" [photoGroup]="photoGroup"></itmp-photo-equipment> -->
<itmp-cctv-video *ngIf="isCctvVideoVisible" [(visible)]="isCctvVideoVisible" [data]="selectEquipmentData">
</itmp-cctv-video>